<template>
	<view class="s-main border-box">
		<view class="header flex justify-content_space-between align-item_center">
			<view class="name">{{props.title}}</view>
			<view class="more flex align-item_center" @click="more" v-if="props.more && props.list.length >0">
				<view>查看更多</view>
				<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/7.png" />
			</view>
		</view>
		<empty v-if="props.list.length === 0" />
		<view class="sub flex align-item_center" v-for="item in props.list" :key="item" @click="details(item)">
			<image class="block cover flex-shrink0" :src="item.picUrl" />
			<view class="info">
				<view class="name flex align-item_center">
					<view>{{item.name}}</view>
				</view>
				<view class="service">上门服务</view>
				<view class="foot flex align-item_center justify-content_space-between">
					<view class="money">￥{{fen2yuan(item.price)}}</view>
					<view class="review flex">
						<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/5.png" />
						<view>{{item.commonNum}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import empty from "@/components/empty.vue"
	import {
		fen2yuan,
	} from '@/sheep/hooks/useGoods.js';
	import {
		navigateTo
	} from "@/utils/tool";
	const props = defineProps({
		title: {
			type: Array,
			default: "推荐服务"
		},
		list: {
			type: Array,
			default: []
		},
		more: {
			type: Boolean,
			default: true
		}
	})

	const more = () => {
		navigateTo(`/homemaking/more/index?id=84&name=更多推荐`)
	}

	const details = (item) => {
		uni.navigateTo({
			url: "/homemaking/details/index?id=" + item.id
		})
	}
</script>

<style scoped lang="scss">
	.s-main {
		padding: 40rpx 20rpx;
		width: 710rpx;
		border-radius: 8rpx;
		background: #EFE5D0;
		margin: 20rpx auto 0;

		.sub {
			margin-top: 40rpx;

			.info {
				width: 100%;

				.foot {
					margin-top: 16rpx;

					.review {
						view {
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 34.76rpx;
							color: rgba(153, 153, 153, 1);
						}

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}

					.money {
						font-size: 40rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 57.92rpx;
						color: rgba(167, 37, 48, 1);
					}
				}

				.service {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34.76rpx;
					color: rgba(166, 123, 123, 1);
					margin-top: 20rpx;
				}

				.name {
					view {
						width: 450rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.54rpx;
						color: rgba(64, 3, 3, 1);
					}

				}
			}

			.cover {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				margin-right: 42rpx;
			}
		}

		.header {
			.more {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(153, 153, 153, 1);

				image {
					width: 12rpx;
					height: 24rpx;
					margin-left: 20rpx;
				}
			}

			.name {
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(64, 3, 3, 1);
			}
		}
	}
</style>